
<script setup>
import { ref } from "vue";
import { VueUiKpi } from "vue-data-ui";
import "vue-data-ui/style.css"

const config = ref({
  "animationFrames": 60,
  "animationValueStart": 0,
  "backgroundColor":"#ffffff00",
  "fontFamily": "inherit",
  "layoutClass": "p-4 m-4 rounded-md shadow",
  "layoutCss": "",
  "prefix": "",
  "suffix": "μS/cm",
  "title": "土壤导电率",
  "titleBold": true,
  "titleColor": "rgba(41, 41, 41, 1)",
  "titleClass": "",
  "titleCss": "",
  "titleFontSize": 18,
  "useAnimation": true,
  "valueBold": true,
  "valueColor": "#6376DD",
  "valueClass": "",
  "valueCss": "",
  "valueFontSize": 32,
  "valueRounding": 0,
  "formatter": null,
  "analogDigits": {
    "show": false,
    "height": 40,
    "color": "#1A1A1Aff",
    "skeletonColor": "rgba(225, 229, 232, 1)"
  }
});


const dataset = ref(380);

</script>

<template>
  <div style="width: 14vw">
    <VueUiKpi :config="config" :dataset="dataset" />
  </div>

</template>

